<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>应收库存</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--插件样式-->
    <link rel="stylesheet" href="/dist/plugins/select2/select2.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .table > tbody > tr > td {
            height: 20px;
            max-height: 44px;
            /*overflow: hidden;*/
        }

        .content {
            padding: 2px 2px;
            padding-bottom: 0;
        }

        .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
            padding: 0 6px;
            height: 20px;
            vertical-align: middle;
        }

        .table > thead > tr > th {
            border-bottom: 1px solid #cbcbcd;
        }

        span.lineOne {
            line-height: 28px;
            height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .lineOne {
            text-align: left;
        }

        .lineOne span, .lineSpan {
            max-height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-align: left;
            padding-right: 10px;
        }

        p {
            margin: auto 5px;
            font-size: 15px;
        }
    </style>
</head>
<body>
<section class="content" id="app" style=";min-height: 100vh">
    <div class="div-td-content-more"><i></i></div>
    <div class="box-body no-padding iframeH" id="scrollDiv">
        <div id="progress" class="wyui-progress"></div>
        <p>新机库存</p>
        <table class="table table-bordered text-center" style="table-layout: fixed;">
            <thead>
            <tr>
                <th style="width: 100px">提车公司</th>
                <th style="width: 120px">品牌</th>
                <th style="width: 140px">库存地</th>
                <th style="width: 80px">状态</th>
                <th style="width: 80px">机型</th>
                <th style="width: 90px">出厂日期</th>
                <th style="width: 80px">斗容</th>
                <th style="width: 140px">序列号</th>
                <th style="width: 90px">备注</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in list1">
                <td class="lineOne"><span>{{item.companyName}}</span></td>
                <td>{{item.brandName}}</td>
                <td class="lineOne"><span>{{item.storeAddress=='-'?'/':item.storeAddress}}</span></td>
                <td>{{item.state}}</td>
                <td class="lineOne"><span>{{item.modelName}}</span></td>
                <td>{{item.pickUpDate}}</td>
                <td class="lineOne"><span>{{item.bucketType==''?'/':item.bucketType}}</span></td>
                <td>{{item.sequence==''?'/':item.sequence}}</td>

                <td style="text-align: left;">{{item.remark}}</td>
            </tr>
            </tbody>
        </table>
        <p>旧机库存</p>
        <table class="table table-bordered text-center" style="table-layout: fixed;">
            <thead>
            <tr>
                <th style="width: 100px">归属公司</th>
                <th style="width: 120px">品牌</th>
                <th style="width: 140px">存放地</th>
                <th style="width:80px "></th>
                <th style="width: 80px">状态</th>
                <th style="width:80px "></th>
                <th style="width: 80px">机型</th>
                <th style="width: 90px">出厂日期</th>
                <th style="width: 140px">序列号</th>
                <th style="width: 90px">备注</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in list2">
                <td class="lineOne"><span>{{item.companyName}}</span></td>
                <td>{{item.brandName}}</td>
                <td class="lineOne"><span>{{item.storeAddress==''?'/':item.storeAddress}}</span></td>
                <td></td>
                <td>{{item.state}}</td>
                <td></td>
                <td>{{item.modelName}}</td>
                <td>{{item.factoryDate!=''?item.factoryDate+'年':'/'}}</td>
                <td>{{item.sequence=='无'?'/':item.sequence}}</td>
                <td style="text-align: left;">{{item.remark}}</td>
            </tr>
            </tbody>
        </table>
        <p>置换房产明细</p>
        <table class="table table-bordered text-center" style="table-layout: fixed;">
            <thead>
            <tr>
                <th style="width: 100px">归属公司</th>
                <th style="width: 120px">房屋名称</th>
                <th style="width: 140px">房屋位置</th>
                <th style="width: 80px"></th>
                <th style="width: 80px">状态</th>
                <th style="width: 80px"></th>
                <th style="width: 220px">楼号、单元</th>
                <th style="width: 90px">面积(m²)</th>
                <th style="width: 90px">备注</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in list3">
                <td class="lineOne"><span>{{item.companyName}}</span></td>
                <td>{{item.houseName}}</td>
                <td class="lineOne"><span>{{item.houseAddress}}</span></td>
                <td></td>
                <td>{{item.state}}</td>
                <td></td>
                <td>{{item.buildingNumber}}</td>
                <td>{{item.area}}</td>
                <td style="text-align: left;">{{item.remark}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</section>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oaApp.js"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/plugins/select2/select2.full.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + 12 + "px",
                        "left": $(this).offset().left - 6,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            list1: [],
            list2: [],
            list3: [],
        },
        methods: {
            getList: function () {
                var that = this;
                var data = {userId: getUrlParamObj().userId}
                $.ajax({
                    url: server.ip + '/deviceSample/selectStockList.json',
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r)
                        that.list1 = res.data.sendData.newSample;
                        that.list2 = res.data.sendData.oldSample;
                        that.list3 = res.data.sendData.oldHouse;
                    }
                });
            },
        },
        mounted: function () {
            //查询用户有哪些权限
            var that = this;
            that.getList();
        }
    });
</script>
</body>
</html>